<template>
	<view>
		<!-- <view>
			<u-navbar
			title="苏J90283"
			rightText="更多"
			@rightClick="rightClick"
			:autoBack="true">
			</u-navbar>
		</view> -->
		<view>
			<u-tabs
			:list="tabs"
			lineWidth="40"
			:activeStyle="{color: '#3c9cff',fontSize:'14px',fontWeight: 'bolder'}"
			itemStyle="background-color: white;line-height:40px;"
			:scrollable="false"
			@change="change"
			:current="tabCurrent">
			</u-tabs>
		</view>
		<view v-if="tabCurrent == 0">
			<view class="data-box">
				<view class="form-block">
					<view class="card">
						<view class="card-body">
							<u--form class="from-card" labelPosition="left" labelWidth="80" :model="info">
								<u-form-item label="车牌号" prop="carNum" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="info.carNum"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="车型" prop="carType" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="info.carType"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item
									label="车辆正面照"
									prop="frontImage"
									borderBottom
									ref="frontImage">
									<u-upload
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										:deletable="false"
										:fileList="frontImage"
										maxCount="1">
									</u-upload>
								</u-form-item>
								<u-form-item label="品牌型号" prop="brand" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="info.brand"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="准乘人数" prop="rideNum" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="info.rideNum"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="裸车价(元)" prop="price" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="info.price"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="交强险到期" prop="jqxTime" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="info.jqxTime"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="商业险到期" prop="syxTime">
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="info.syxTime"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="负责人" prop="syxTime">
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="info.auditPersonName"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
							</u--form>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="tabCurrent == 1">
			<view class="data-box">
				<view class="form-block">
					<view class="card">
						<view class="card-body">
							<u--form class="from-card" labelPosition="left" labelWidth="80" :model="license">
								<u-form-item label="年检到期" prop="inspectionTime" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="license.inspectionTime"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="所有人" prop="carOwner" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="license.carOwner"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="车辆识别码" prop="carCode" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="license.carCode"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="发动机号码" prop="engineCode" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="license.engineCode"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="注册日期" prop="registerTime" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="license.registerTime"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item label="发证日期" prop="cardTime" borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									v-model="license.cardTime"
									inputAlign="right"
									border="none"
									></u--input>
								</u-form-item>
								<u-form-item
									label="行驶证照片"
									prop="licenseImage"
									ref="licenseImage">
									<u-upload
										disabled
										disabledColor="#ffffff"
										:deletable="false"
										:fileList="licenseImage"
										maxCount="2">
									</u-upload>
								</u-form-item>
							</u--form>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-button">
			<view class="submit-block" style="display: flex;">
				<view class="submit-block_item_sp" style="background-color: #9a9d9f;width: 50%;" @click="goBack()">返 回</view>
				<view class="submit-block_item_sp" style="background-color: #0081FF;width: 50%;" @click="submit()">修 改 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getInfo,getLicense } from '@/api/car.js'
	export default {
		data() {
			return {
				tabs: [
					{
						name: '基本信息',
					}, {
						name: '行驶证',
					},
				],
				tabCurrent:0,
				frontImage:[],
				licenseImage:[],
				info:{
					id:'',
					carNum:'',
					carType:'',
					frontImage:'',
					brand:'',
					rideNum:'',
					price:'',
					jqxTime:'',
					syxTime:'',
					zxchCarLicenseBo:{},
				},
				license:{
					carId:'',
					inspectionTime:'',
					carOwner:'',
					carCode:'',
					engineCode:'',
					registerTime:'',
					cardTime:'',
					licenseImage:'',
				},
			}
		},
		onLoad(option) {
			this.getCarInfo(option.carId)
		},
		methods: {
			change(data) {
				this.tabCurrent = data.index;
				// if(data.index == 1 && this.license.carId == ''){
				// 	this.getLicenseInfo(this.info.id)
				// }
			},
			async getCarInfo(id){
				const { data } = await getInfo(id);
				if(data.code == 200){
					this.info = data.data
					this.frontImage = []
					data.data.frontImage.split(',').map(e=>{
						this.frontImage.push({url:e})
					})
					this.getLicenseInfo(this.info.id)
				}else{
					
				}
			},
			async getLicenseInfo(carId){
				const { data } = await getLicense(carId);
				if(data.code == 200){
					this.license = data.data
					this.licenseImage = []
					data.data.licenseImage.split(',').map(e=>{
						if(e){
							this.licenseImage.push({url:e})
						}
					})
				}else{
					
				}
			},
			submit(){
				this.gotoPage('/subPackTask/work/xzgl/clgl/edit?id='+this.info.id+"&licenseId="+this.license.id)
			},
			goBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}	
	.submit-block_item_sp:nth-child(1) {
	    border-right: 2rpx solid #fff;
	}
</style>
